<template>
  <div>
    <el-form :model="param" :rules="rules" ref="login" label-width="80px">
      <el-form-item label="" prop="username">

        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<el-input type="text" placeholder="请输入要搜索的内容" size="small"
                  prefix-icon="el-icon-search"
                  v-model="param.find" style="width: 350px"></el-input>
        &nbsp; &nbsp;
        <el-button type="primary" >
          <i class="el-icon-search"></i>
          搜索
        </el-button>
        <el-card style="width: 540px">
          <template #header>
            <div class="card-header">
              <span>筛选</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

              <el-button class="button" type="text">
                <i class="el-icon-close"></i>
              </el-button>
            </div>
          </template>
          <div>
            <span>内容：</span>&nbsp;&nbsp;&nbsp;
            <br/>&nbsp;
            <el-link type="primary" @click="toTag('内容：姓名')">姓名</el-link>&nbsp;
            <el-link type="primary" @click="toTag('内容：身份证号')">身份证号</el-link>&nbsp;
            <el-link type="primary" @click="toTag('内容：准考证号')">准考证号</el-link>&nbsp;
            <el-link type="primary" @click="toTag('内容：电子邮箱')">电子邮箱</el-link>&nbsp;
            <el-link type="primary" @click="toTag('内容：手机号码')">手机号码</el-link>
          </div>
          <div>
            <span>性别：</span>&nbsp;&nbsp;&nbsp;
            <br/>&nbsp;
            <el-link type="primary" @click="toTag('性别：男')">男</el-link>&nbsp;
            <el-link type="primary" @click="toTag('性别：女')">女</el-link>&nbsp;
          </div>
          <div>
            <span>专业层次：</span>&nbsp;&nbsp;&nbsp;
            <br/>&nbsp;
            <el-link type="primary" @click="toTag('专业层次：本科')">本科</el-link>&nbsp;
            <el-link type="primary" @click="toTag('专业层次：专科')">专科</el-link>&nbsp;
          </div>
          <div>
            <span>专业名称：</span>&nbsp;&nbsp;&nbsp;
            <br/>&nbsp;
            <el-link type="primary" @click="toTag('专业名称：计算机科学技术')">计算机科学技术</el-link>&nbsp;
            <el-link type="primary" @click="toTag('专业名称：网路工程')">网路工程</el-link>&nbsp; |&nbsp;
            <el-link type="primary" @click="toTag('专业名称：计算机信息管理')">计算机信息管理</el-link>&nbsp;
            <el-link type="primary" @click="toTag('专业名称：计算机应用技术')">计算机应用技术</el-link>&nbsp;

          </div>

          <div>
            <span>审核结果：</span>&nbsp;&nbsp;&nbsp;
            <br/>&nbsp;
            <el-link type="primary" @click="toTag('审核结果：审核通过')">审核通过</el-link>&nbsp;
            <el-link type="primary" @click="toTag('审核结果：审核不通过')">审核不通过</el-link>&nbsp; |&nbsp;
            <el-link type="primary" @click="toTag('审核结果：未审核')">未审核</el-link>&nbsp;

          </div>
        </el-card>

      </el-form-item>



      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      <el-tag
          v-for="tag in tags"
          :key="tag.name"
          class="mx-1"
          closable
          :type="tag.type"
      >
        {{ tag.name }}
      </el-tag>


      <!--
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              class="ml-1 w-20"
              size="small"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
          >
          </el-input>
        -->
    </el-form>
    <div style="margin-left: 65%">
      <el-tooltip
          effect="dark"
          content="仅当前页面未审核的数据"
          placement="top">
        <el-button type="primary" @click="AllpassSign">
          一键审核通过
        </el-button>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="仅当前页面未审核的数据"
          placement="top">
        <el-button type="primary"  @click="AllrefuseSign">一键审核不通过</el-button>
      </el-tooltip>
      <el-button type="primary">导出表格</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="70" />
      <el-table-column prop="sex" label="性别" width="50" />
      <el-table-column prop="sfzh" label="身份证号" width="100" />
      <el-table-column prop="ticket" label="准考证号" width="100" />
      <el-table-column prop="tele" label="手机号码" width="100" />
      <el-table-column prop="email" label="电子邮箱" width="100" />
      <el-table-column prop="zycc" label="专业层次" width="100" />
      <el-table-column prop="zymc" label="专业名称" width="100" />
      <el-table-column prop="kcdm" label="课程代码" width="100" />
      <el-table-column prop="file" label="个人文件" width="100" #default="scope" >
        <el-link v-for="(f,key) in segmenteFile(scope.row.file)" :key="key" target="_blank" :href="f.fsrc">{{f.fname}}</el-link>
      </el-table-column>
      <el-table-column prop="res" label="审核结果" width="100" />
      <el-table-column  label="操作" width="180" >
        <template #default="scope">
          <div v-if="tableData[scope.$index].res == '未审核' ">
            <el-button type="primary" circle @click="PassSign(scope.$index)">
              <i class="el-icon-check"></i>
            </el-button>
            <el-button type="danger" circle @click="RefuseSign(scope.$index)">
              <i class="el-icon-close"></i>
            </el-button>
          </div>
          <div v-if="tableData[scope.$index].res == '审核通过' ">
            <el-button type="success" circle @click="BackSign(scope.$index)">
              <i class="el-icon-back"></i>
            </el-button>
          </div>
          <div v-if="tableData[scope.$index].res =='审核不通过' ">
            <el-button type="success" circle @click="BackSign(scope.$index)">
              <i class="el-icon-back"></i>
            </el-button>
          </div>
        </template>



      </el-table-column>
    </el-table>
    <br />
    <template>
      <el-pagination background layout="prev, pager, next" :total="pagenum"
                     :hide-on-single-page="false"
                     page-size="10"
                     page-count="12">
      </el-pagination>
    </template>

  </div>
</template>

<script>

export default {
  //报名审核
  name: "AdminExamine",
  data(){
    return {
      //页数
      pagenum:"1",
      //当前页数
      page:1,
      tags :[
        { name: 'Tag 1', type: '' },
      ],
      param: {
        find: "",
      },

      tableData : []

    }
  },
  mounted() {
    this.$forceUpdate()         //解决数据渲染延迟
    this.calcPage();
    //显示第一页的内容
    this.showPage(this.page);
  },
  methods:{
    //计算总页数
    calcPage(){
      this.axios.post("signupnum",
      ).then((response) => {
        console.log(response.data)
        if (response.data['msg'] == "ok") {
          this.pagenum = response.data['num']
        }
      })
    },
    //显示第几页的内容
    showPage(page){
      let params = new URLSearchParams();
      params.append("page",page)
      this.axios.post("examine",
          params
      ).then((response) => {
        console.log(response.data)
        if (response.data['msg'] == "ok") {
          this.tableData = response.data['examine']
        }
      })
    },
    //分割文件(file是所有的字符串地址)
    segmenteFile(file){
      let array = file.split('|');
      console.log(array)
      console.log(array.length)
      let list = [];
      for(let i = 0 ; i < array.length ; i++ ){
        let names = array[i].split('_');
        list.push({'fname':names[1],'fsrc': this.$store.state.baseurl +array[i]})
      }
      console.log(list)
      return list;
    },
    toTag(message){
      this.tags.push({ name: message, type: '' })
    },
    //通过报名
    PassSign(index){
      let params = new URLSearchParams();
      params.append("ticket",this.tableData[index]["ticket"])
      params.append("res","1")
      this.axios.post("auditstatus",
          params
      ).then((response) => {
        console.log(response.data)
        if (response.data['msg'] == "ok") {
          this.$forceUpdate()
          this.showPage(this.page)
          console.log(response.data)
        }
      })
    },
    //审核不通过
    RefuseSign(index){
      let params = new URLSearchParams();
      params.append("ticket",this.tableData[index]["ticket"])
      params.append("res","-1")
      this.axios.post("auditstatus",
          params
      ).then((response) => {
        console.log(response.data)
        if (response.data['msg'] == "ok") {
          this.$forceUpdate()
          console.log(response.data)
          this.showPage(this.page)
        }
      })
    },
    //撤销审核
    BackSign(index){
      let params = new URLSearchParams();
      params.append("ticket",this.tableData[index]["ticket"])
      params.append("res","0")
      this.axios.post("auditstatus",
          params
      ).then((response) => {
        console.log(response.data)
        if (response.data['msg'] == "ok") {
          this.$forceUpdate()
          console.log(response.data)
          this.showPage(this.page)
        }
      })
    },
    //一键审核通过
    AllpassSign(){
      this.$confirm('此操作将把当前页面未审核的数据全部审核通过, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '一键审核通过成功!'
        });
        for(let i = 0 ; i < this.tableData.length ; i++ ){
          if( this.tableData[i]['res'] == "未审核" ){
            this.PassSign(i);
          }
        }
        this.$forceUpdate()
        this.getInfo()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消一键审核通过'
        });
      });
    },
    //一键审核不通过
    AllrefuseSign(){
      this.$confirm('此操作将把当前页面未审核的数据全部审核不通过, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '一键审核不通过成功!'
        });
        for(let i = 0 ; i < this.tableData.length ; i++ ){
          if( this.tableData[i]['res'] == "未审核" ){
            this.RefuseSign(i);
          }
        }
        this.$forceUpdate()
        this.getInfo()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消一键审核不通过'
        });
      });
    },
  }

}
</script>

<style scoped>

</style>